<template>
  <div class="btn-groups">
    <div v-for="(group, groupIdx) in buttonList" :key="groupIdx" class="btn-groups__items">
      <el-row>
        <template v-for="(items, itemsIdx) in group">
          <template v-if="items.type === 'dropdown'">
            <el-dropdown
              :key="itemsIdx"
              v-has="items.url"
              :permission="items.url"
              trigger="click"
              @command="items.method"
            >
              <el-button :size="$store.getters.size" type="primary">
                {{ items.text }}
                <i :class="items.icon"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" class="btn-groups__dropdownItem">
                <el-dropdown-item
                  v-for="(dropdownItems, dropdownIdx) in items.dropdownList"
                  :key="dropdownIdx"
                  :command="dropdownItems.value"
                >{{ dropdownItems.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button
              v-hasPermi="[items.permission ? items.permission : '*:*:*']"
              :key="itemsIdx"
              :size="$store.getters.size"
              :type="items.btnType"
              :icon="items.icon"
              :disabled="items.disabled"
              :loading="items.loading"
              @click="items.method"
              plain
            >{{ items.text }}</el-button>
          </template>
        </template>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    buttonList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    btnGroup() {
      const btnGroup = {};
      this.buttonList.flat().forEach(el => {
        btnGroup[el.name] = el;
      });
      return btnGroup;
    }
  },
  methods: {
    findBtn(name) {
      return this.btnGroup[name];
    },
    setDisabled(name) {
      if (Array.isArray(name)) {
        name.forEach(i => {
          this.findBtn(i) && (this.findBtn(i).disabled = true);
        });
      } else {
        this.findBtn(name) && (this.findBtn(name).disabled = true);
      }
    },
    setEnabled(name) {
      if (Array.isArray(name)) {
        name.forEach(i => {
          this.findBtn(i) && (this.findBtn(i).disabled = false);
        });
      } else {
        this.findBtn(name) && (this.findBtn(name).disabled = false);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.btn-groups {
  white-space: nowrap;
  margin-left: 20px;
  margin-top: 5px;
  // &__items {
  //   white-space: nowrap;
  //   button {
  //     padding: 6px 5px;
  //   }
  // }
  // &__dropdownItem {
  //   max-height: 300px;
  //   overflow-y: scroll;
  // }

  // /deep/ .el-button {
  //   & > i {
  //     display: inline-block;
  //     transform: scale(0.95);
  //   }
  //   & [class*='el-icon-'] + span {
  //     margin-left: 0px;
  //     display: inline-block;
  //     transform: scale(0.95);
  //   }
  // }
}
</style>
